<template>
    <div class="hs">
        <SearchTitle></SearchTitle>
        <ul class="hotSearch">
            <li v-for="(hot,index) in hotSearch" @click="$emit('change',hot.first)" :key="index">{{hot.first}}</li>
        </ul>
    </div>
</template>
<script>
    import SearchTitle from "../components/SerachTitle";
    export default {
        components: {
            SearchTitle
        },
        name:'HotSearch',
        data(){
            return {
                hotSearch:[]
            }
        },
        created(){
            this.$http.get("/search/hot").then(data=>{
                this.hotSearch = data.data.result.hots
            })
        },
    }
</script>

<style lang="less" scoped>
    .hs{
        height: 100px;
    }
    .hotSearch{
        list-style: none;
        overflow: hidden;
        margin-bottom: 0;
        padding-left: 10px;
        margin-top: 0;
        height: 60px;
        li{
            font-size: 13px;
            list-style: none;
            float: left;
            border-radius: 15px;
            border: 1px solid #e5e6ea;
            color: #333;
            margin-top: 3px;
            margin-right: 3px;
            margin-left: 3px;
            padding-left: 10px;
            padding-right: 10px;
            background-color: whitesmoke;
        }
    }

</style>